<template>
	<div class="block">
		<component
			:is="block人员疏散通道1_list"
			:list="data?.[activeIndex]?.msg"
		/>

		<div class="chart-list">
			<div
				class="item"
				v-for="(item, index) in data"
				@click="onClick(index)"
				:key="index"
			>
				<component
					:is="block人员疏散通道1_chart"
					:list="item?.tb"
				/>
				<p :class="{active: activeIndex === index}">{{ title[index] }}</p>
			</div>
		</div>

		<component
			:is="block人员疏散通道4"
			:date="date"
			:index="activeIndex"
			@toPage="toPage"
		/>
	</div>
</template>

<script setup>
import { defineProps, onMounted, defineEmits, ref, watch } from 'vue'
import block人员疏散通道1_list from './block人员疏散通道1_list'
import block人员疏散通道1_chart from './block人员疏散通道1_chart'
import block人员疏散通道4 from './block人员疏散通道4'
import {
	housescj_rysstd,
	housescjjc_rysstd,
	housesjzhc_rysstd,
	housesqjhc_rysstd,
	housessjhc_rysstd,
} from '@/service/village'

const props = defineProps({
	date: {
		type: Array,
		default: () => []
	},
	role: {
		type: Number,
		default: 2
	}
})
const emits = defineEmits(['toPage'])

const toPage = query => {
	emits('toPage', query)
}

const title = [
	'自查达标率',
	'检查达标率',
	'乡镇核验达标率',
	'区级核验达标率',
	'市级核验达标率',
]
const data = ref(new Array(5).fill({}))
const activeIndex = ref(0)

const getData = async (url, index) => {
	const result = await url({
		date: props.date
	})
	data.value[index] = result?.data
}

const onClick = index => {
	activeIndex.value = index
}

watch(() => props.role, val => {
	const roleEnum = {
		2: 4,
		3: 3,
		4: 2
	}
	activeIndex.value = roleEnum[val]
}, { immediate: true })

onMounted(() => {
	const apis = [
		housescj_rysstd,
		housescjjc_rysstd,
		housesjzhc_rysstd,
		housesqjhc_rysstd,
		housessjhc_rysstd,
	]
	apis.map((item, index) => {
		getData(item, index)
	})
})
</script>

<style scoped lang="less">
.block {
	:deep(.pie-chart) {
		height: 320px;
	}
	.chart-list {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 32px;
		.item {
			height: 33vw;
			width: 33.33%;
			&:nth-of-type(1) {
				margin-left: 16.16%
			}
			p {
				text-align: center;
			}
			.active {
				color: var(--van-primary-color);
			}
		}
		:deep(.pie-chart) {
			width: 100%;
			height: 30vw;
		}
	}
}
</style>
